<template>
  <a-modal
    title="编辑账单"
    :width="900"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading" class="main-contents">
      <a-form :form="form">
        <a-form-item v-show="false"><a-input v-decorator="['id']" /></a-form-item>
      </a-form>
       <a-row class="hang">
        <h4>【{{ dataRes.qsNum }}期賬單】 ---{{ dataRes.name }}-{{ dataRes.phone }}</h4>
      </a-row>
      <a-row class="hang">
        <a-col :span="4">交租日</a-col>
        <a-col :span="8">{{ dataRes.rentedDay }}</a-col>
      </a-row>
      <a-row class="hang">
        <a-col :span="4">賬單週期</a-col>
        <a-col :span="8">{{ dataRes.rentStartDate }}至{{ dataRes.rentEndDate }}</a-col>
      </a-row>
      <a-divider />
      <a-row v-for="(item, index) in yjList" :key="index" class="hang">
        <a-col :span="4">{{ item.rentAmountName}}</a-col>
        <a-col :span="8">{{ item.amount }}元</a-col>
      </a-row>
      <a-divider />
      <div>
        <h3>臨時支出:</h3>
        <a-row>
          <a-table
              size="middle"
              :columns="columns"
              :dataSource="lszc"
              :pagination="false"
              :rowKey="(record) => record.rentAmountCategory"
              :loading="memberLoading">
          <template slot="amount" slot-scope="text, record">
                              <a-input-number
                                  style="width:100%"
                                  :precision="2"
                                  :min="0"
                                  :value="text"
                                  :max="99999999"
                                  @change="e => handlelszcChange(e,record.rentAmountCategory, 'amount')"
                                  :step="10"/>
                            </template>
                            <template slot="operation" slot-scope="text, record">
                              <a @click="lszcClick(record.rentAmountCategory)">删除</a>
                            </template>
          </a-table>
        </a-row>
        <a-button type="primary"  @click="lszcAddClick(2)" icon="plus" size="small" class="add_my">
          添加
        </a-button>
      </div>
      <a-divider />
      <div>
        <h3>臨時收入:</h3>
        <a-row>
          <a-table
              size="middle"
              :columns="columns"
              :dataSource="lssr"
              :pagination="false"
              :rowKey="(record) => record.rentAmountCategory"
              :loading="memberLoading">
          <template slot="amount" slot-scope="text, record">
                              <a-input-number
                                  style="width:100%"
                                  :precision="2"
                                  :min="0"
                                  :value="text"
                                  :max="99999999"
                                  @change="e => handleLsSrChange(e,record.rentAmountCategory, 'amount')"
                                  :step="10"/>
                            </template>
                            <template slot="operation" slot-scope="text, record">
                              <a @click="srClick(record.rentAmountCategory)">删除</a>
                            </template>
          </a-table>
        </a-row>
        <a-button type="primary" @click="lszcAddClick(1)"  icon="plus" size="small" class="add_my">
          添加
        </a-button>
      </div>
      <a-divider/>
      <div>備注： <a-textarea v-model="remark"></a-textarea></div>
    </a-spin>
    <bill-lszc-select ref="billLszcSelect" @ok="handleLszcOk"/>
  </a-modal>
</template>
select
<script>
  import moment from 'moment'
  import { ownerLeaseBillEdit, getOwnerBillDetailForEdit } from '@/api/modular/main/ownerleasebill/ownerLeaseBillManage'
  import billLszcSelect from '../housebill/billLszcSelect.vue'
  export default {
    components: {
      billLszcSelect
    },
    data () {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15 }
        },
        visible: false,
        confirmLoading: false,
        memberLoading: false,
        type: 1,
        form: this.$form.createForm(this),
        remark: '',
        dataRes: {},
        yjList: [],
        columnsYj: [
          {
            title: '名稱',
            dataIndex: 'rentAmountName',
            width: '30%',
            scopedSlots: { customRender: 'rentAmountName' }
          },
          {
            title: '金額',
            dataIndex: 'amount',
            width: '30%',
            scopedSlots: { customRender: 'amount' }
          }
        ],
        columns: [
          {
            title: '名稱',
            dataIndex: 'rentAmountName',
            width: '30%',
            scopedSlots: { customRender: 'rentAmountName' }
          },
          {
            title: '金額',
            dataIndex: 'amount',
            width: '30%',
            scopedSlots: { customRender: 'amount' }
          },
          {
            title: '操作',
            key: 'action',
            scopedSlots: { customRender: 'operation' }
          }
        ],
        lssr: [],
        lszc: []
      }
    },
    methods: {
      moment,
      // 初始化方法
      edit (id, remark, type) {
        this.visible = true
        this.type = type
        this.remark = remark
        setTimeout(() => {
          this.form.setFieldsValue(
            {
              id: id
            }
          )
        }, 100)
        this.initXgData(id)
      },
      initXgData(id) {
         getOwnerBillDetailForEdit(id).then((res) => {
              if (res.code === 200) {
                this.dataRes = res.data
                this.yjList = this.dataRes.noEditdetails
                this.lssr = this.dataRes.lssr
                this.lszc = this.dataRes.lszc
              } else {
                this.$message.error(res.msg)
              }
            }).finally((res) => {
         })
      },
      /**
       * 选择子表单单项触发
       */
      handleChange (value, key, column) {
        const newData = [...this.sdtx]
        const target = newData.find(item => key === item.id)
        if (target) {
          target[column] = value
          this.sdtx = newData
        }
      },
      handleYjChange(value, key, column) {
        const newData = [...this.yjList]
        const target = newData.find(item => key === item.id)
        if (target) {
          target[column] = value
          this.yjList = newData
        }
      },
      handleLsSrChange (value, key, column) {
        const newData = [...this.lssr]
        const target = newData.find(item => key === item.rentAmountCategory)
        if (target) {
          target[column] = value
          this.lssr = newData
        }
      },
       /**
       * 删除
       */
      srClick (key) {
        const newData = this.lssr.filter(item => item.rentAmountCategory !== key)
        this.lssr = newData
      },
      handlelszcChange (value, key, column) {
        const newData = [...this.lszc]
        const target = newData.find(item => key === item.rentAmountCategory)
        if (target) {
          target[column] = value
          this.lszc = newData
        }
      },
      /**
       * 删除
       */
      lszcClick(key) {
        const newData = this.lszc.filter(item => item.rentAmountCategory !== key)
        this.lszc = newData
      },
      lszcAddClick(type) {
        if (type === 1) {
          this.$refs.billLszcSelect.select(this.lssr, 1)
        } else {
          this.$refs.billLszcSelect.select(this.lszc, 2)
        }
      },
      handleSubmit () {
        this.confirmLoading = true
         const { form: { validateFields } } = this
        this.confirmLoading = true
        validateFields((errors, values) => {
          if (!errors) {
            for (const key in values) {
              if (typeof (values[key]) === 'object') {
                values[key] = JSON.stringify(values[key])
              }
            }
            values.type = 1
            values.remark = this.remark
            values.lssr = this.lssr
            values.lszc = this.lszc
            ownerLeaseBillEdit(values).then((res) => {
              if (res.code === 200) {
                this.$message.success('编辑成功')
                this.confirmLoading = false
                this.$emit('ok', '')
                this.handleCancel()
              } else {
                this.$message.error(res.msg)//  + res.message
              }
            }).finally((res) => {
              this.confirmLoading = false
            })
          } else {
            this.confirmLoading = false
          }
        })
      },
      handleLszcOk(values, type) {
        if (type === 1) {
          if (values.length > 0) {
            const chllenLen = values.length
            for (var i = 0; i < chllenLen; i++) {
              const target = this.lssr.find(item => values[i].rentAmountCategory === item.rentAmountCategory)
              if (!target) {
                this.lssr.push(values[i])
              }
            }
          }
        } else if (type === 2) {
          if (values.length > 0) {
            const chllenLen = values.length
            for (var iv = 0; iv < chllenLen; iv++) {
              const target = this.lszc.find(item => values[iv].rentAmountCategory === item.rentAmountCategory)
              if (!target) {
                this.lszc.push(values[iv])
              }
            }
          }
        }
      },
      handleCancel () {
        this.form.resetFields()
        this.visible = false
        this.remark = ''
        this.dataRes = {}
        this.yjList = []
        this.lssr = []
        this.lszc = []
      }
    }
  }
</script>

<style scoped>
.main-contents{
  padding: 10px 20px;
}
.dd{
  text-align: center;
}
.in-number{
  width: 80%;
  float: right;
}
</style>
